<template>
  <div>
    <el-card>
      贺宇飞
      <el-row style="margin-bottom:10px" v-if="Boolean($route.query.id)">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{$route.query.name}}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
      </el-row>
      <!-- 目录搜素表单 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="searchref">
        <el-form-item label="目录名称">
          <el-input v-model="formInline.directoryName"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.state" placeholder="请选择">
            <el-option label="已启用" value="1"></el-option>
            <el-option label="已禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="clean">清除</el-button>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item class="filter-item fr">
          <span @click="$router.back()" style="color:#409eff;margin-right:10px" v-if="Boolean($route.query.id)"><i
              class="el-icon-back"></i>返回学科</span>
          <el-button type="success" icon="el-icon-edit" @click="addDirectory">新增目录</el-button>
        </el-form-item>
      </el-form>
      <el-alert :title="`数据一共${counts}条`" type="info" show-icon :closable="false"></el-alert>
      <!-- 目录管理列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" type="index">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科">
        </el-table-column>
        <el-table-column prop="directoryName" label="目录名称">
        </el-table-column>
        <el-table-column prop="creatorID" label="创建者">
        </el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="scope">
            {{scope.row.addDate | parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column prop="totals" label="面试题数量">
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state===1">已启用</span>
            <span v-else>已禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.state===0" @click="qy(scope.row)">启用</el-button>
            <el-button type="text" v-else @click="jy(scope.row)">禁用</el-button>
            <el-button type="text" :disabled="scope.row.state===0?false:true"
              @click="xiugai(scope.row.id,scope.row.directoryName,scope.row.subjectID)">修改
            </el-button>
            <el-button type="text" :disabled="scope.row.state===0?false:true" @click="delData(scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.page" :page-sizes="[3,5,7,10]" :page-size="queryInfo.pagesize"
        layout=" prev, pager, next,sizes, jumper" :total="counts">
      </el-pagination>
    </el-card>
    <!-- 新增目录的对话框 -->
    <el-dialog title="新增目录" :visible.sync="dialogVisible" width="30%" @close="handleClose">
      <el-form ref="form1" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="所属学科" v-if="!$route.query.id">
          <el-select v-model="form.subjectID" placeholder="请选择" class="DD">
            <el-option :label="item.subjectName" :value="item.subjectID" v-for="(item,index) in tableData" :key="index">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input v-model="form.directoryName" width="100%" placeholder="请输入目录名称"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="addList">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改按钮的对话框 -->
    <el-dialog title="修改目录" :visible.sync="editDialog" width="30%" @close='handleClose2'>
      <el-form ref="form2" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="所属学科" v-if="!$route.query.id">
          <el-select v-model="form.subjectID" placeholder="请选择" class="DD">
            <el-option :label="item.subjectName" :value="item.subjectID" v-for="(item,index) in tableData" :key="index">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input v-model="form.directoryName" width="100%" placeholder="请输入目录名称"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose2">取 消</el-button>
        <el-button type="primary" @click="update1">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, update, remove, changeState } from '@/api/hmmm/directorys.js'
export default {
  name: 'Directory',
  data () {
    return {
      // 目录搜素表单对象
      formInline: {
        directoryName: '',
        state: ''
      },
      // 查询参数对象
      queryInfo: {
        pagesize: 10, // 每页显示条数
        page: 1 // 当前页码
      },
      tableData: [], // 目录列表的数据(数组)

      counts: 0, // 总数据条数
      // 新增目录对话框里的表单
      form: {
        directoryName: '',
        subjectID: ''
      },
      dialogVisible: false, // 新增目录对话框的显示与隐藏
      // 新增目录对话框里的表单的校验规则
      rules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      editDialog: false// 修改对话框的显示与隐藏
    }
  },
  methods: {
    // 获取目录列表数据
    async getList (data) {
      const { data: res } = await list(data)
      this.tableData = res.items
      this.queryInfo.pagesize = res.pagesize * 1// 每页显示条数
      this.queryInfo.page = res.page * 1// 当前页码
      this.counts = res.counts // 总数据条数
    },
    // 点击筛选按钮,按照用户输入的目录名称和选择的状态且回到第一页进行查询,更新列表
    onSubmit () {
      this.getList(this.formInline)
    },
    // 选择条数下拉框，按照选择的条数且回到第一页进行查询，更新列表。
    handleSizeChange (val) {
      this.queryInfo.pagesize = val
      this.getList(this.queryInfo)
    },
    // 点击分页按钮，按照按钮的页码进行查询，更新列表。
    handleCurrentChange (val) {
      this.queryInfo.page = val
      this.getList(this.queryInfo)
    },
    // 点击清除按钮，清空关键字输入框
    clean () {
      // 表单重置功能暂缓
      this.formInline = {
        directoryName: '',
        state: ''
      }
      this.getList(this.queryInfo)
    },
    // 点击新增目录按钮弹出对话框
    addDirectory () {
      this.dialogVisible = true
    },
    // 新增目录
    addList () {
      this.$refs.form1.validate(async valid => {
        if (!valid) {
          return this.$message.error('请填写必填项')
        }
        let res = null
        if (this.$route.query.id) {
          res = await add({ ...this.form, subjectID: this.$route.query.id * 1 })
        } else {
          res = await add(this.form)
        }
        if (res.status !== 200) {
          return this.$message.error('新增数据失败')
        }
        this.$message.success('新增数据成功')
        this.dialogVisible = false
        this.getList()
      })
    },
    // 新增目录的对话框关闭事件
    handleClose () {
      this.form = {
        directoryName: '',
        subjectID: ''
      }
      this.$refs.form1.resetFields()
      this.dialogVisible = false
    },
    // 点击修改按钮弹出对话框
    xiugai (id, directoryName, subjectID) {
      this.form.id = id
      this.form.directoryName = directoryName
      this.form.subjectID = subjectID
      this.editDialog = true
    },
    // 修改按钮弹出对话框的确认按钮点击事件
    update1 () {
      this.$refs.form2.validate(async valid => {
        if (!valid) return
        let res = null
        if (this.$route.query.id) {
          res = await update({ ...this.form, subjectID: this.$route.query.id * 1 })
        } else {
          res = await update(this.form)
        }
        if (res.status !== 200) {
          return this.$message.error('修改目录失败')
        }
        this.$message.success('修改目录成功')
        this.getList()
        this.editDialog = false
      })
    },
    // 点击确认按钮，进行删除操作
    async delData (id) {
      const res = await this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      if (res === 'confirm') {
        const qq = await remove({ id: id })
        if (qq.status !== 200) {
          return this.$message.success('删除失败')
        }
        this.$message.success('删除成功')
        this.getList()
      }
    },
    // 点击启用按钮
    async qy (row) {
      const res = await changeState({
        id: row.id,
        state: row.state === 0 ? 1 : 0
      })
      if (res.status !== 200) {
        return this.$message.info('操作失败')
      }
      this.$message.success('操作成功')
      this.getList()
    },
    // 点击禁用按钮
    async jy (row) {
      const res = await changeState({
        id: row.id,
        state: row.state === 1 ? 0 : 1
      })
      if (res.status !== 200) {
        return this.$message.info('操作失败')
      }
      this.$message.success('操作成功')
      this.getList()
    },
    handleClose2 () {
      this.$refs.form2.resetFields()
      this.editDialog = false
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {},
  created () {
    if (this.$route.query) {
      this.getList({ subjectID: this.$route.query.id, page: 1, pagesize: 10 })
    } else {
      this.getList(this.queryInfo)
    }
  },
  mounted () { }
}
</script>

<style scoped lang='less'>
.el-col-24 {
  width: 200px;
}
.el-alert {
  margin-bottom: 15px;
}
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
/deep/.DD {
  width: 100% !important;
}
.el-breadcrumb {
  font-size: 14px;
  padding: 18px 0;
  border-bottom: 1px solid #ebeef5;
}
</style>
